<html>  
  <head>  
        <meta charset="utf-8">  
        <title>6.8.1 折线图</title>  
  </head> 
  <style>
.axis path,
.axis line{
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}
 
.axis text {
	font-family: sans-serif;
	font-size: 11px;
}
  </style>
<body>

<script src="../../d3/d3.min.js" charset="utf-8"></script> 
<script>  

var width  = 500;	//SVG绘制区域的宽度
var height = 500;	//SVG绘制区域的高度
	
var svg = d3.select("body")			//选择<body>
			.append("svg")			//在<body>中添加<svg>
			.attr("width", width)	//设定<svg>的宽度属性
			.attr("height", height);//设定<svg>的高度属性


var dataset = [
	{
		country: "china",
		gdp: [[2000,11920],[2001,13170],[2002,14550],
			[2003,16500],[2004,19440],[2005,22870],
			[2006,27930],[2007,35040],[2008,45470],
			[2009,51050],[2010,59490],[2011,73140],
			[2012,83860],[2013,103550]]
	},
	{
		country: "japan",
		gdp: [[2000,47310],[2001,41590],[2002,39800],
				[2003,43020],[2004,46550],[2005,45710],
				[2006,43560],[2007,43560],[2008,48490],
				[2009,50350],[2010,54950],[2011,59050],
				[2012,59370],[2013,48980]]
	}
];


//外边框
var padding = { top: 50 , right: 50, bottom: 50, left: 50 };

//计算GDP的最大值				
var gdpmax = 0;
for(var i = 0; i < dataset.length; i++){
	var currGdp = d3.max( dataset[i].gdp , function(d) { return d[1]; } );
	if( currGdp > gdpmax )
		gdpmax = currGdp;
}

var xScale = d3.scale.linear()
					.domain([2000,2013])
					.range([ 0 , width - padding.left - padding.right ]);
					
var yScale = d3.scale.linear()
					.domain([0,gdpmax * 1.1])
					.range([ height - padding.top - padding.bottom , 0 ]);

//创建一个直线生成器
var linePath = d3.svg.line()
				.x(function(d){ return xScale(d[0]); })
				.y(function(d){ return yScale(d[1]); })
				.interpolate("basis");

//定义两个颜色				
var colors = [ d3.rgb(0,0,255) , d3.rgb(0,255,0) ];
				
//添加路径
svg.selectAll("path")	//选择<svg>中所有的<path>
	.data(dataset)		//绑定数据
	.enter()			//选择enter部分
	.append("path")		//添加足够数量的<path>元素
	.attr("transform","translate(" + padding.left + "," +  padding.top  +")")
	.attr("d", function(d){
		return linePath(d.gdp);		//返回线段生成器得到的路径
	})	
	.attr("fill","none")
	.attr("stroke-width",3)
	.attr("stroke",function(d,i){
		return colors[i];
	});
	

var markStep = 80;
	
var gMark = svg.selectAll(".gMark")
				.data(dataset)
				.enter()
				.append("g")
				.attr("transform",function(d,i){
					return "translate(" + (padding.left + i * markStep)  + "," + ( height - padding.bottom + 40)  +")";
				});
	
gMark.append("rect")
		.attr("x",0)
		.attr("y",0)
		.attr("width",10)
		.attr("height",10)
		.attr("fill",function(d,i){ return colors[i]; });

gMark.append("text")
		.attr("dx",15)
		.attr("dy",".5em")
		.attr("fill","black")
		.text(function(d){ return d.country; });		

//x轴
var xAxis = d3.svg.axis()
				.scale(xScale)
				.ticks(5)
				.tickFormat(d3.format("d"))
				.orient("bottom");
	
//y轴
var yAxis = d3.svg.axis()
				.scale(yScale)
				.orient("left");
				
svg.append("g")
		.attr("class","axis")
		.attr("transform","translate(" + padding.left + "," + (height - padding.bottom) +  ")")
		.call(xAxis);
			
svg.append("g")
		.attr("class","axis")
		.attr("transform","translate(" + padding.left + "," + padding.top +  ")")
		.call(yAxis); 
	

</script> 

</body>
</html>